import { Component, OnDestroy, OnInit } from '@angular/core';
import { ToastService } from 'src/app/service/toast.service';
import { load } from '@amap/amap-jsapi-loader';
import { throwError } from 'rxjs';
import { mapGdKey } from 'config';

@Component({
  selector: 'app-map-gd',
  templateUrl: './map-gd.component.html',
  styleUrls: ['./map-gd.component.scss']
})
export class MapGdComponent implements OnInit, OnDestroy {

  aMap: any;
  constructor(
    private toast: ToastService,
  ) { }

  ngOnDestroy(): void {
    if (this.aMap) {
      this.aMap.destroy();
    }
  }

  ngOnInit() {
    this.mapInit();
  }

  mapInit() {

    load({ // 首次调用 load
      key: mapGdKey, // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [ // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        'AMap.Scale',
        'AMap.ToolBar',
        'AMap.MapType',
        'AMap.Driving',
        'AMap.Geolocation',
      ],
      AMapUI: { // 是否加载 AMapUI，缺省不加载
        version: '1.1', // AMapUI 缺省 1.1
        plugins: [], // 需要加载的 AMapUI ui插件
      },
      Loca: { // 是否加载 Loca， 缺省不加载
        version: '2.0' // Loca 版本，缺省 1.3.2
      },
    }).then((AMap) => {
      this.aMap = new AMap.Map('container', {
        viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',
        center: [113.544078, 34.795761],
        zoom: 16
      });
      this.aMap.addControl(new AMap.Scale());
      this.aMap.addControl(new AMap.ToolBar());
      // this.aMap.addControl(new AMap.MapType());
      const driving = new AMap.Driving({
        policy: AMap.DrivingPolicy.LEAST_TIME,
        map: this.aMap,
      });
      const points = [
        { keyword: '郑州站火车站东广场', city: '郑州' },
        { keyword: '郑州高新企业加速器产业园南区', city: '郑州' }
      ];
      const opts = {
        // 途经点参数，最多支持传入16个途经点
        waypoints: [
          { keyword: '汇泉西悦城', city: '郑州' },
          { keyword: '中原万达广场', city: '郑州' }
        ]
      };
      // new AMap.LngLat(113.657437,34.745812), new AMap.LngLat(113.544078, 34.795761)
      driving.search(points, opts, (status: string, result: string) => {
        if (status === 'complete') {
          this.toast.success('绘制驾车路线完成');
        } else {
          this.toast.error('获取驾车数据失败：' + result);
        }
      });
      const geolocation = new AMap.Geolocation({
        enableHighAccuracy: true, // 是否使用高精度定位，默认:true
        timeout: 10000, // 超过10秒后停止定位，默认：5s
        buttonPosition: 'RB', // 定位按钮的停靠位置
        buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
        zoomToAccuracy: true, // 定位成功后是否自动调整地图视野到定位点
      });
      this.aMap.addControl(geolocation);
      geolocation.getCurrentPosition((status: string, result: any) => {
        if (status === 'complete') {
          // console.log('获取位置信息成功 === ', result);
        } else {
          // console.log('获取位置信息失败 === ', result);
        }
      });
      this.aMap.add(new AMap.Marker({
        position: this.aMap.getCenter()
      }));
      this.aMap.on('complete', () => {
        this.toast.success('地图加载完成 !');
      });
      this.aMap.on('click', (e: any) => {
        // console.log('cp-location === ', e, e.lnglat.getLng(), e.lnglat.getLat());
      });
    }).catch((e) => {
      throwError(e);
    });
  }

}
